import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'custom_animated_bottom_bar.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

class DioIndex extends StatefulWidget {
  const DioIndex({Key? key}) : super(key: key);

  @override
  _DioIndexState createState() => _DioIndexState();
}

class _DioIndexState extends State<DioIndex> {
  int _currentIndex = 0;
  final _inactiveColor = Colors.grey;
  Color backgroundColor = Color(0xff050b18) ;
  List<String> titles = ['首页', '搜索', '排名', '直播'];
  List<Widget>? _pages;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(titles[_currentIndex], style: TextStyle(fontSize: 16)),
        backgroundColor: backgroundColor,
      ),
      backgroundColor: backgroundColor,
      bottomNavigationBar: _buildBottomBar(),
      body: getBody(),
    );
  }

  Widget getBody() {
    double width = 414;

    if (_pages == null) {
      _pages = List.generate(titles.length, (index) {
        return LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            print(constraints);
            return Container(
              width: width,
              height: constraints.maxHeight,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: backgroundColor,
                border: Border.all(color:Colors.white),
              ),
              child: SingleChildScrollView(
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(titles[index],style:TextStyle(color:Colors.white)),
                      HttpDemo(key:ValueKey('http')),
                    ],
                  ),
                ),
              ),
              // child: Text("Home",style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold),),
            );
          },
        );
      }).toList();
    }
    return IndexedStack(
      index: _currentIndex,
      children: _pages!,
    );
  }

  _buildBottomBar() {
    return CustomAnimatedBottomBar(
      containerHeight: 56,
      backgroundColor: backgroundColor,
      selectedIndex: _currentIndex,
      showElevation: true,
      itemCornerRadius: 24,
      curve: Curves.easeInOut,
      onItemSelected: (index) => setState(() => _currentIndex = index),
      items: <MyBottomNavigationBarItem>[
        MyBottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text(titles[0]),
          activeColor: Color(0xffF4D144),
          inactiveColor: _inactiveColor,
          textAlign: TextAlign.center,
        ),
        MyBottomNavigationBarItem(
          icon: Icon(Icons.search),
          title: Text(titles[1]),
          activeColor: Colors.greenAccent,
          inactiveColor: _inactiveColor,
          textAlign: TextAlign.center,
        ),
        MyBottomNavigationBarItem(
          icon: Icon(Icons.apps),
          title: Text(
            titles[2],
          ),
          activeColor: Colors.pink,
          inactiveColor: _inactiveColor,
          textAlign: TextAlign.center,
        ),
        MyBottomNavigationBarItem(
          icon: Icon(Icons.video_camera_front),
          title: Text(titles[3]),
          activeColor: Colors.blue,
          inactiveColor: _inactiveColor,
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}


class HttpDemo extends StatefulWidget {
  const HttpDemo({Key? key}) : super(key: key);

  @override
  _HttpDemoState createState() => _HttpDemoState();
}

class _HttpDemoState extends State<HttpDemo> {
  Response? response;

  @override
  Widget build(BuildContext context) {
    return Column(children:[
      ElevatedButton(
        onPressed: () async {
          try {
            setState(() {
              response = null;
            });

            /// 这里对加载弹窗进行重新定义，当然你也可以使用自己的方法
            EasyLoading.instance
              ..loadingStyle = EasyLoadingStyle.custom

            ///背景颜色
              ..backgroundColor = Color(0xfff4f7fb)

            ///进度颜色
              ..indicatorColor = Color(0xff0082CD)
              ..textColor = Color(0xff0082CD)
              ..textStyle = TextStyle(fontSize: 12)
              ..indicatorType = EasyLoadingIndicatorType.cubeGrid;

            ///执行加载动画
            EasyLoading.show(status: "加载中...");

            response = await Dio().get(
                'https://www.telechat.fun/api-tele/live/visitor-join',
                queryParameters: {'livedId': '616'});
            print('response:${response}');
            setState(() {});
          } catch (e) {
            print('error:${e}');
          } finally {
            EasyLoading.dismiss();
          }
        },
        child: Text('http'),
      ),
      Builder(
          builder: (context) {
            print("response type: ${response.runtimeType}");
            return Text(response?.toString() ?? 'null' ,style:TextStyle(color:Colors.white));
          }
      ),
    ]);
  }
}
